<script setup>
import { ref } from 'vue'
import { memberOrderIdCancel } from '@/api/order'
import { ElMessage } from 'element-plus'
import { useOrderGoodstStore } from '@/stores/index'
const store = useOrderGoodstStore()
const id = ref('')
const cancelReason = ref('')
const form = ref()
const show = ref(false)
defineExpose({
  show,
  id
})

const closeEvent = () => {
  cancelReason.value = ''
  id.value = ''
}
const SubmitEvent = async () => {
  if (cancelReason.value === '') {
    ElMessage.error('请选择原因')
    return
  } else {
    const res = await memberOrderIdCancel(id.value, { cancelReason: cancelReason.value })
    store.getData()
    ElMessage.success('取消完成')
  }
  show.value = false
}
</script>
<template>
  <div class="goodDialog">
    <el-dialog v-model="show" title="取消订单" width="500" @close="closeEvent">
      <div class="content">
        <div class="topFon">取消订单后，本单享有的优惠可能会一并取消，是否继续？</div>
        <div class="fon">请选择取消订单的原因（必选）：</div>
        <el-form ref="form">
          <el-radio-group v-model="cancelReason" size="large">
            <el-radio-button class="radioButton" label="配送信息有误" value="配送信息有误" />
            <el-radio-button class="radioButton" label="商品买错了" value="商品买错了" />
            <el-radio-button class="radioButton" label="重复下单/误下单" value="重复下单/误下单" />
            <el-radio-button
              class="radioButton"
              label="忘记使用优惠券、兔币等"
              value="忘记使用优惠券、兔币等"
            />
            <el-radio-button
              class="radioButton"
              label="其他渠道价格更低"
              value="其他渠道价格更低"
            />
            <el-radio-button class="radioButton" label="不想买了" value="不想买了" />
          </el-radio-group>
        </el-form>
      </div>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="show = false" type="info">取消</el-button>
          <el-button type="success" @click="SubmitEvent"> 确认 </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>
<style scoped lang="scss">
.goodDialog {
  .content {
    .topFon {
      padding-top: 20px;
      color: black;
    }
    .fon {
      padding-top: 10px;
      color: grey;
    }
    .radioButton {
      padding: 10px;
    }
    :deep() {
      .el-radio-button__inner {
        width: 214px;
      }
    }
  }
  .dialog-footer {
    text-align: center;
  }
}
</style>
